<!-- eslint-disable max-len -->
<script setup lang="ts">
import { Ref, ref } from 'vue';

const disable = ref(false);
const readonly = ref(false);
const displayText = ref('');
const forcePlaceholder = ref(true);
const editable = ref(false);
const enableClear = ref(true);
const multiSelect = ref(false);
const disabled = ref(false);
const separator = ref(',');
const enableTitle = ref(true);
const enableSearch = ref(true);
const field1Value = ref('item1');
const field2Value = ref('');
const field1Ref = ref();
const field2Ref = ref();

const data1: Ref<any[]> = ref([]);
for (let index = 0; index < 15; index++) {
    const item = { valueField: `item${index}`, textField: `类型${index}` };
    data1.value.push(item);
}

const field2Items = [];
for (let index = 0; index < 15; index++) {
    const item = { valueField: `item${index}`, textField: `类型${index}`, refField: `item${index % 3}` };
    field2Items.push(item);
}
const data2: Ref<any[]> = ref(field2Items);

function onClear(params: any) {
    console.log('clear');
}
function toClearField1(payload: MouseEvent) {
    field1Value.value = '';
}
function toClearField2(payload: MouseEvent) {
    field2Value.value = '';
}
function onField1Changed(selectedItems: any[]) {
    const selectedItem = selectedItems[0];
    if (selectedItem) {
        data2.value = field2Items.filter((item: any) => item.refField === selectedItem.valueField);
    }
}
function getField1DisplayText() {
    const displayText = field1Ref.value ? field1Ref.value.getDisplayText() : 'field1Ref object is null';
    console.log(displayText);
}
function getField2DisplayText() {
    const displayText = field2Ref.value ? field2Ref.value.getDisplayText() : 'field2Ref object is null';
    console.log(displayText);
}
</script>

<template>
    <div style="width: 100%; padding: 100px">
        <div id="field1">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group common-group">
                    <label class="col-form-label" title="field1">
                        <span class="farris-label-text">字段一</span>
                    </label>
                    <div class="farris-input-wrap">
                        <f-combo-list
                            ref="field1Ref"
                            :disable="disable"
                            :readonly="readonly"
                            :disabled="disabled"
                            :display-text="displayText"
                            :force-placeholder="forcePlaceholder"
                            placeholder="请选择"
                            :editable="editable"
                            :enable-clear="enableClear"
                            :max-length="18"
                            @clear="onClear"
                            :data="data1"
                            :multi-select="multiSelect"
                            :enable-title="enableTitle"
                            :separator="separator"
                            :enable-search="enableSearch"
                            v-model="field1Value"
                            :value-field="'valueField'"
                            :text-field="'textField'"
                            :id-field="'valueField'"
                            @change="onField1Changed"
                        />
                    </div>
                </div>
            </div>
            字段一当前值：{{ field1Value }}
        </div>
        <div style="margin: 10px 0">
            <f-button @click="toClearField1">清空字段一</f-button>
            <f-button @click="getField1DisplayText">获取字段一显示文本</f-button>
        </div>
        <div id="field2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group common-group">
                    <label class="col-form-label" title="field1">
                        <span class="farris-label-text">字段一</span>
                    </label>
                    <div class="farris-input-wrap">
                        <f-combo-list
                            ref="field2Ref"
                            :disable="disable"
                            :readonly="readonly"
                            :disabled="disabled"
                            :display-text="displayText"
                            :force-placeholder="forcePlaceholder"
                            placeholder="请选择"
                            :editable="true"
                            :enable-clear="enableClear"
                            :max-length="18"
                            @clear="onClear"
                            :data="data2"
                            :multi-select="multiSelect"
                            :enable-title="enableTitle"
                            :separator="separator"
                            :enable-search="enableSearch"
                            v-model="field2Value"
                            :value-field="'valueField'"
                            :text-field="'textField'"
                            :id-field="'valueField'"
                        />
                    </div>
                </div>
            </div>
            字段二当前值：{{ field2Value }}
        </div>
        <div style="margin: 10px 0">
            <f-button @click="toClearField2">清空字段二</f-button>
            <f-button @click="getField2DisplayText">获取字段二显示文本</f-button>
        </div>
    </div>
</template>
